<template>
    <view class="w-[100%] py-[20rpx] relative px-[32rpx] bg-[#FFFFFF]" >
        <!-- <image src="@/static/images/icon/card.png" class="w-[100%] top-0 absolute right-0 h-[100%]" /> -->
        <!-- <view class="right_top">
            包看车
        </view> -->
        <view class="flex items-center justify-between">
            <view class="w-[132rpx] topBtn px-[32rpx] py-[12rpx] ml-[-12rpx] relative"
                style="border-radius: 12rpx 12rpx 12rpx 0rpx;background: linear-gradient( 180deg, #000000 0%, #585858 100%);">
                <image src="@/static/images/icon/care.png"
                    class="w-[76rpx] z-[1] absolute top-[8rpx] right-[6rpx] h-[45.92rpx]" />
                <view class="text-[28rpx] text-[#FFEA90] mb-[2rpx] font-[500]">
                    {{ item.informationType == 0 ? '求购' : item.informationType == 1 ? '收购' : item.informationType == 2 ?
                        '批发' : item.informationType == 3 ? '询价' : '' }}
                </view>
            </view>
            <view v-if="item?.informationType == 2" class="texy-[28rpx] font-[500] text-[#000000]">￥<text class="text-[red]">{{ '****' }}</text>万
            </view>
            <view class="flex items-center">
                <up-avatar size="44rpx" :src="item?.avatar"></up-avatar>
                <view class="font-[400] text-[#666666] text-[24rpx] ml-[12rpx]">{{ item?.userName }}</view>
            </view>
            <!-- <view class="text-[20rpx] text-[#999999] font-[400]">
                南宁·3分钟前
            </view> -->
        </view>
        <view @click.stop="handleCardClick"
            class="px-[16rpx] pt-[14rpx] font-[500] text-[32rpx] text-[#000000] leading-[48rpx] text-left font-[PingFangSC]">
            {{ item?.brandModel }}</view>
        <view @click.stop="handleCardClick" v-if="item?.informationType == 2" class="flex items-center justify-between mt-[18rpx] ">
            <view class="flex items-center justify-between w-[315rpx] ">
                <up-tag  bgColor="#F2F2F2" borderColor="#F2F2F2" color="#9B9B9B" :text="item?.emissionStandard" plain
                    size="mini"></up-tag>
                <up-tag class="mx-[28rpx]" bgColor="#F2F2F2" borderColor="#F2F2F2" color="#9B9B9B"
                    :text="item?.displacement + 't'" plain size="mini"></up-tag>
                <image src="@/static/images/icon/xyjh.png" class="w-[160rpx] h-[36rpx] " />
            </view>
            <view class="font-[400] text-[24rpx] text-[#999999] leading-[36rpx] text-center font-[PingFangSC]">{{
                item?.registrationDate }} / {{ item?.mileage }}万公里</view>
        </view>
        <view @click.stop="handleCardClick" class="text-[27rpx] text-[#333333] mt-[16rpx]">{{ item?.description }}</view>
        <template v-if="typeof item?.image == 'string'">
            <view v-if="item?.image?.split(',')?.length > 0" class="mt-[20rpx]">
                <up-album multipleSize="204rpx" maxCount="3" :urls="item?.image?.split(',')"></up-album>
            </view>
        </template>
        <view class="flex items-center justify-between mt-[24rpx] ">
            <view @click="kfa" class="flex items-center justify-between">
                <image class="w-[44rpx] h-[44rpx]" src="@/static/images/icon/lxt.png"></image>
                <view class="ggge">私聊他</view>
            </view>
            <view @click="kfa" class="flex items-center justify-between">
                <image class="w-[44rpx] h-[44rpx] ml-[-32rpx]" src="@/static/images/icon/lttm.png"></image>
                <view class="ggge">咨询</view>
            </view>
            <!-- <view class="flex items-center justify-between mr-[-40rpx] ">
                <image class="w-[44rpx] h-[44rpx]" src="@/static/images/icon/weixin.png"></image>
                <view class="ggge">微信</view>
            </view> -->
            <image  @click="makePhoneCall" src="@/static/images/icon/dhdh.png" class="w-[44rpx] h-[44rpx] mr-[-28rpx]"></image>
            <!-- <image src="@/static/images/icon/fx.png" class="w-[44rpx] h-[44rpx]"></image>  -->
           
            <button open-type="share" class="btn"  style="padding:0;margin:0;border:none;background:transparent;width:44rpx;height:44rpx;display:flex;align-items:center;justify-content:center;">
    <image src="@/static/images/icon/fx.png" class="w-[44rpx] h-[44rpx]"></image>
</button>

           
            </view>
    </view>
</template>
<script setup>
//提示功能在开发中
const kfa = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
    duration: 2000
  })
}
// 拨打电话
const makePhoneCall = () => {
  if (!props.item.phone) {
    uni.showToast({
      title: '电话号码不可用',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  
  uni.makePhoneCall({
    phoneNumber: props.item.phone,
    success: () => {
      console.log('拨打电话成功');
    },
    fail: (err) => {
      console.error('拨打电话失败', err);
    }
  });
}

// 添加卡片点击跳转函数
const handleCardClick = () => {
  if (props.item) {
    const url = props.item.informationType == 2 ? 
      `/pages_qc/wholesale_details/index?id=${props.item.id}` : 
      `/pages_qc/particularscar/particularscar?id=${props.item.id}`;
    uni.navigateTo({
      url
    })
  }
}

const props = defineProps({
    item: {
        type: Object,
        default: () => ({
            image: ['https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4f0bda4836b74b15af3a49e5eda5b58e_mergeImage.png', 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4f0bda4836b74b15af3a49e5eda5b58e_mergeImage.png', 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4f0bda4836b74b15af3a49e5eda5b58e_mergeImage.png', 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4f0bda4836b74b15af3a49e5eda5b58e_mergeImage.png', 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4f0bda4836b74b15af3a49e5eda5b58e_mergeImage.png']
        })
    }
})
</script>
<style lang="scss">

.btn {
    width: 500rpx;
    height: 96rpx;
    background: linear-gradient(98deg, #000000 0%, #454545 100%);
    border-radius: 16rpx;
}

.gradient-text {
    background: linear-gradient(180deg, #FFE788 0%, #FFF6D7 100%);
    -webkit-background-clip: text;
    font-weight: 600;
    font-size: 32rpx;
    -webkit-text-fill-color: transparent;
    /* 兼容旧版浏览器 */
    background-clip: text;
    /* 标准语法 */
    color: transparent;
    /* 标准语法 */
}

.topBtn::after {
    content: '';
    position: absolute;
    width: 12rpx;
    height: 20rpx;
    background: linear-gradient(45deg, #f7f7f7, #f7f7f7 50%, #000000 50%, #000000 100%);
    bottom: -18rpx;
    left: 0;
}
.btn {
	all: unset;
	position: relative;

}
	.btn::after {
		border: none;
	}
.right_top {
    width: 264rpx;
    height: 104rpx;
    background: linear-gradient(98deg, #FFF8DD 0%, #FFD856 100%);
    border-radius: 16rpx 36rpx 16rpx 16rpx;
    position: absolute;
    top: 18rpx;
    right: 6rpx;
    padding: 4rpx 40rpx;
    font-size: 34rpx;
    color: #000000;
    font-weight: 700;
    text-align: end;
    z-index: -1;
}

.ggge {

    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    margin-left: 12rpx;
}
.u-transition {
margin-right: 0;
}

</style>